<template>
	<div>
		<div>{{ date }}</div>

		<!-- v-mode 专门收集表单信息 -->
		<form action="" method="post">
			<!-- autocomplete  自动保存 上次输入的数据 -->
			用户名 <input type="text" autocomplete="on" placeholder="用户名" @blur="checkuser" v-model="username" />
			<span v-show="isuer">长度6位</span>
			<!-- <span v-show="! reg.test(username)">长度6位</span> -->
			<br />
			密码 <input type="password" autocomplete="on" placeholder="密码" v-model="password" /> <br />
		</form>
	</div>
</template>

<script setup>
	import { ref } from 'vue'

	let date = ref('')
	let username = ref('')
	let password = ref('')
	let isuer =  ref(false)
	let reg = /[a-z]{6,}/i
	let checkuser = function () {
		if (reg.test(username.value)) {
			isuer.value = false
		} else {
			isuer.value = true
		}
		isuer.value = ! reg.test(username.value)
	}

	setInterval(() => {
		let time = new Date()
		// 4位数
		let year = time.getFullYear()
		// 0-11  010
		// let bbac = "3".padStart(2,"0")
		// console.log(bbac);
		let month = `${time.getMonth()}`.padStart(2, '0')
		let day = `${time.getDate()}`.padStart(2, '0')
		// 0-59
		let hh = `${time.getHours()}`.padStart(2, '0')
		let mm = `${time.getMinutes()}`.padStart(2, '0')
		let ss = `${time.getSeconds()}`.padStart(2, '0')
		date.value = `${year}年${month}月${day}日 ${hh}:${mm}:${ss}`
	}, 1000)
</script>

<style scoped></style>
